<!--suppress ALL -->
<include file="./Template/header.html" />
<link rel="stylesheet" type="text/css" href="/Template/css/myOrder.css?v=2020080201">
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		initPage("我的订单");

		var app = new Vue({
			el: '#container',
			data: {
				orderList: [],
			},
			methods: {
				payInfo: function(id) {
					window.location.href = "/wechat/userCenter/payInfo/id/"+id;
				},
                groupOrder: function(id) {
                    window.location.href = "/wechat/order/groupOrder?orderId="+id;
                },
			}
		})

		function getOrderList(status) {

			$.ajax({
				url:"/wechat/userCenter/myOrderList",
				type:"post",
				data:{
					status: status
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.orderList = data;
					setTimeout(function() {
						$(".ui-item.measure-info img").bind("click", function() {
							var upUrl = "/Template/images/icon-up.png";
							var downUrl = "/Template/images/icon-down.png";
							$(this).parent().next().toggle();
							if($(this).attr("src") == upUrl) {
								$(this).attr("src", downUrl);
							} else {
								$(this).attr("src", upUrl);
							}
						});
						$(".ui-item.measure-info img").each(function() {
							$(this).trigger("click");
						});
					},200);
				},
			})
		}

		$("#my-order ul li").bind("click", function() {

			if($(this).hasClass("active")) {
				return false;
			}

			var status = $(this).attr("data-status");

			$("#my-order ul li").each(function() {
				$(this).removeClass("active");
			});

			$(this).addClass("active");

			getOrderList(status);

		});

        if(isNullOrEmpty("{$status}")){
            getOrderList(0);
        }else {
            getOrderList("{$status}");
        }
        $(".li-status-4").removeClass("active");
        $(".li-status-1").removeClass("active");
        $(".li-status1").removeClass("active");
        $(".li-status0").removeClass("active");
        switch('{$status}'){
            case '-2':
                $(".li-status-2").attr("class","active");
                break;
            case '-1':
                $(".li-status-1").attr("class","active");
                break;
            case '1':
                $(".li-status1").attr("class","active");
                break;
            case '2':
                $(".li-status2").attr("class","active");
                break;
            case '0':
                $(".li-status0").attr("class","active");
                break;
        }
	});


</script>
<div class="container" id="container">
	<div id="my-order">
		<ul>
			<li class="li-status0 active" data-status="0">
				<span>全部</span>
			</li>
			<li class="li-status-1" data-status="-1">
				<span>待付款</span>
			</li>
			<li class="li-status1" data-status="1">
				<span>已付款</span>
			</li>
			<li class="li-status2" data-status="2">
				<span>已出库</span>
			</li>
			<li class="li-status-2" data-status="-2">
				<span>团购预约</span>
			</li>
		</ul>
	</div>
	<div class="order-detail">
		<div class="no-data" v-if="orderList == null")>暂无数据</div>
		<div class="order-info" v-for="order in orderList">
			<div class="status active" v-if="order.status == -1">
				<img src="/Template/images/icon-wallet.png" alt="">
				<span class="status-content">待付款</span>
			</div>
			<div class="status active" v-if="order.status == 1">
				<img src="/Template/images/icon-clock.png" alt="">
				<span class="status-content">已付款</span>
			</div>
			<div class="status active" v-if="order.status == 2">
				<img src="/Template/images/icon-car.png" alt="">
				<span class="status-content">已出库</span>
			</div>
			<div class="status active" v-if="order.status == -2">
				<img src="/Template/images/icon-groupOrder.png" alt="">
				<span class="status-content" v-if="order.group_status == -1">待开团</span>
				<span class="status-content" v-if="order.group_status == 1">已开团</span>
				<span class="status-content" v-if="order.group_status == ''">团购过期</span>
			</div>
			<div class="have-padding">
				<div class="product-info">
					<img class="product-img" src="{{order.image_url}}" alt="product">
					<div class="detail-info">
						<p class="product-price">￥{{order.single_price}}<!--a style="color: #45a1de" v-if="order.group_code != ''">（原价）</a--></p>
						<p class="product-name">{{order.product_name}}</p>
						<!--p class="number">×{{order.number}}</p-->
						<p class="buy-time">订购日期：{{order.create_time}}</p>
					</div>
					<p class="sum" v-if="order.status != -2">共 <a style="color: #de7965">{{order.number}}</a> 件，合计:<span style="color: #d92f3b;">￥{{order.price}}</span></p>
					<p class="sum" v-if="order.status == -2">共 <a style="color: #de7965">{{order.number}}</a> 件<a style="color: #ffa21c;">，团购总价:<span style="color: #d92f3b;">￥{{order.group_price * order.number}}</span></a></p>
				</div>
				<div class="line"></div>
				<div class="user-order-info">
					<div class="ui-item messege-left" v-if="order.size != null">
						<span class="item-left">规格型号</span>
						<span class="item-right">{{order.size}}</span>
					</div>
					<div class="ui-item pickUp-info">
						<span class="item-left">收件信息</span>
						<span class="item-right">{{order.receive_name}} {{order.receive_contact}} {{order.delivery_type}}</span>
					</div>
					<div class="ui-item pick-own-address" v-if="order.delivery_type == '上门自取'">
						<span class="item-left">自取地址</span>
						<span class="item-right">{{order.receive_address}}</span>
					</div>
					<div class="ui-item pickUp-address" v-else>
						<span class="item-left">收件地址</span>
						<span class="item-right">{{order.receive_address}}</span>
					</div>
					<div class="ui-item messege-left" v-else>
						<span class="item-left">患者姓名</span>
						<span class="item-right">{{order.patient_name}}</span>
					</div>
					<!--div class="ui-item measure-info" v-if="order.need_measure == 1">
						<span class="item-left">测量信息</span>
						<img class="icon-up" src="/Template/images/icon-up.png" alt="">
					</div>
					<div class="measure-content" v-if="order.need_measure == 1">
						<p class="mi-item" v-for="measure in order.measure_data">{{measure.keyword}}：<span class="detail">{{measure.value}}</span></p>
					</div>
					<div class="ui-item product-styles" v-if="order.need_measure == 1">
						<span class="item-left">产品型号</span>
						<span class="item-right">{{order.measure_result}}</span>
					</div-->
					<div class="ui-item messege-left">
						<span class="item-left">留言备注</span>
						<span class="item-right">{{order.note == "" ? "暂无":order.note}}</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.need_invoice == 2">
						<span class="item-left">发票类型</span>
						<span class="item-right">个人</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.need_invoice == -1">
						<span class="item-left">发票</span>
						<span class="item-right">不开发票</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.need_invoice != -1">
						<span class="item-left">发票抬头</span>
						<span class="item-right">{{order.invoice_name}}</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.need_invoice == 1">
						<span class="item-left">纳税人识别号</span>
						<span class="item-right">{{order.invoice_number}}</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.doctor_name != '' && order.group_code == ''">
						<span class="item-left">医生</span>
						<span class="item-right">{{order.doctor_name}}</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.hospital_name != '' && order.group_code == ''">
						<span class="item-left">医院</span>
						<span class="item-right">{{order.hospital_name}}</span>
					</div>
					<div class="ui-item invoice-name" v-if="order.coupon_code != ''">
						<span class="item-left">CP码</span>
						<span class="item-right">{{order.coupon_code}}</span>
					</div>
					<div class="ui-item fast-post" v-if="order.status == 2">
						<span class="item-left">{{order.express_company}}</span>
						<span class="item-right">{{order.delivery_number}}</span>
					</div>
				</div>
				<div class="line"></div>
				<div class="order-operation" v-if="order.status == -1">
					<div class="active pay-btn" v-on:click="payInfo(order.order_id)">付款</div>
				</div>
				<div class="order-operation" v-if="order.status == -2 && order.group_status == 1">
					<div class="active pay-btn" v-on:click="groupOrder(order.order_id)">开团付款</div>
				</div>
			</div>

		</div>

	</div>

</div>

<include file="./Template/footer.html" />

